<template>

  <div class="release">
    <div class="search">
      <a-row>

        <a-col :span="8">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="环境名称："
          >
            <a-input
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <router-link to="/release">
            <a-button type="primary" icon="sync" style="margin-top: 3px;">
              刷新
            </a-button>
          </router-link>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-button type="primary" @click="showModal">
        <a-icon type="plus"/>
        新建
      </a-button>
    </div>
    <div class="app_list">
      <a-table :columns="columns" :data-source="data" rowKey="id">
        <a slot="action" slot-scope="text" href="javascript:;">

          <router-link to="/">编辑</router-link>
          <span style="color: lightgray"> | </span>
          <router-link to="/">删除</router-link>
        </a>

      </a-table>

    </div>

    <div>

      <a-modal width="720px" v-model="visible" title="新建环境" @ok="handleOk">
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
          <a-form-item label="环境名称">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入环境名称' }] }]"
            />
          </a-form-item>
          <a-form-item label="唯一标识符">
            <a-input
              v-decorator="['tag', { rules: [{ required: true, message: '请输入唯一标识符' }] }]"
            />
          </a-form-item>
          <a-form-item label="备注信息">
            <a-input type="textarea"/>
          </a-form-item>

        </a-form>
      </a-modal>
    </div>


  </div>

</template>

<script>

  const columns = [
    {title: '序号', dataIndex: 'id', key: 'id'},
    {title: '环境名称', dataIndex: 'name', key: 'name'},
    {title: '标识符', dataIndex: 'tag', key: 'tag'},
    {title: '描述信息', dataIndex: 'desc', key: 'desc'},
    {title: 'Action', dataIndex: '', key: 'x', scopedSlots: {customRender: 'action'}},

  ];

  // const data = [
  //   {
  //     key: 1,
  //     id: 1,
  //     name: 'John Brown',
  //     age: 32,
  //     address: 'New York No. 1 Lake Park',
  //     description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  //   },
  //
  // ];

  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 12},
  };

  export default {
    name: "Release",
    data() {
      return {
        name:'',
        tag:'',
        desc:'',

        formLayout: 'horizontal',
        form: this.$form.createForm(this, { name: 'coordinated' }),
        formItemLayout,
        columns,
        data:[],
        visible: false,
        visible1: false,
        current: 0,
        steps: [
          {
            title: 'First',
            content: '基本配置',
          },
          {
            title: 'Second',
            content: '发布主机',
          },
          {
            title: 'Last',
            content: '任务配置',
          },
        ],


      }
    },
    created() {
      this.get_envrionments_data();
    },

    methods: {

      get_envrionments_data(){
        this.$axios.get(`${this.$settings.HOST}/conf_center/environments/`)
        .then((res)=>{
          this.data = res.data;
        }).catch((error)=>{

        })
      },

      handleSubmit(e) {
        e.preventDefault();
          // console.log('xxxxx')
          // console.log(e);
          this.form.validateFields((err, values) => {
            if (!err) {

              console.log('Received values of form: ', values);

              this.$axios.post(`${this.$settings.host}/conf_center/environments/`,values)
              .then((res)=>{
                this.$message.success('添加成功！')
                // console.log(res.data);
                this.data.push(res.data);
              }).catch((error)=>{

              })

              this.visible = false;

            }
          });
      },


      next() {
        this.current++;
      },

      prev() {
        this.current--;
      },

      showModal() {
        this.visible = true;
      },


      handleOk(e) {
        // console.log(e);
        this.handleSubmit(e);


      },
    },


  }
</script>

<style scoped>
  .xx_title:after {
    border: none;
  }
</style>

